import classNames from 'classnames';
import { format } from 'date-fns';
import { useNavigate } from 'react-router-dom';
import Button from 'src/component/Button';
import { Page } from 'src/constant/Page';
// import { Fill } from 'src/model/Order';
import { bnFormat } from 'src/util/bigNumber';
import style from './OrderAllTable.module.scss';

type Fill = any

type Props = {
    data?: Fill[];
};

const OrderAllTable = ({ data }: Props) => {
    const navigate = useNavigate();

    const elementMapFunction = (order: Fill) => (
        <div key={order.FID} className={style.dataRowBlock}>
            <div className={style.dataRow}>
                <div className={classNames(style.item, style.itemWidthL)}>
                    <div>{order.FID}</div>
                </div>
                <div className={classNames(style.item, style.itemWidthL)}>
                    <>{format(Date.parse(order.FAddtime), 'yyyy/MM/dd HH:mm:ss')}</>
                </div>
                <div className={classNames(style.item, style.itemWidthL)}>
                    <div>{`${bnFormat(order.FQuantity)} ${"USDT"}`}</div>
                </div>
                <div className={classNames(style.item, style.itemWidthL)}>
                    {/* <div>{`${bnFormat(order.FPrice)} ${"CNY"}`}</div> */}
                    <div>{`${order.FPrice} ${"CNY"}`}</div>
                </div>
                <div className={classNames(style.item, style.itemWidthL)}>
                    <div>{`${bnFormat(order.FCNY)} ${"CNY"}`}</div>
                </div>
                <div className={classNames(style.item, style.infoItem, style.itemWidthS)}>
                    <div className={style.bank}>
                        {order.FState}<br />
                        {order.FReason ? order.FReason : ""}
                    </div>
                </div>
                <div className={classNames(style.item, style.itemWidthS)}>
                    <Button appearance="text" onClick={() => navigate(Page.Order + '/' + order.FID, {
                        state: {
                            ...order,
                        },
                    })}>
                        详情
                    </Button>
                </div>
            </div>
            <div className={style.divider} />
        </div>
    );

    return (
        <div className={style.self}>
            <div className={style.titleRow}>
                <div className={style.itemWidthL}>订单编号</div>
                <div className={style.itemWidthL}>时间</div>
                <div className={style.itemWidthL}>数量</div>
                <div className={style.itemWidthL}>单价</div>
                <div className={style.itemWidthL}>收款金额</div>
                <div className={style.itemWidthS}>状态</div>
            </div>
            <div className={style.divider} />
            {data?.map(elementMapFunction)}
        </div>
    );
};

export default OrderAllTable;
